import React from 'react';
import { cn } from '@/lib/utils';

// 妇好鸮尊的模拟数据
const fuHaoOwlZunData = {
  title: "妇好鸮尊",
  subtitle: "商朝最“萌”的战神",
  imageDescription: "猫头鹰造型，昂首挺胸，双眼圆瞪，像一位戴着头盔的“商代士兵”",
  basicInfo: {
    age: "商代晚期",
    material: "青铜",
    size: "高46.3厘米",
    feature: "一对，站立鸮形，纹饰精美",
    exhibitionHall: "1楼2展厅",
    amazingFeature: "它的主人是中国第一位女将军——妇好！"
  },
  function: "盛酒礼器，是女战神妇好的心爱之物，用来在庆典和祭祀中醉酒敬神。",
  values: [
    {
      title: "主人传奇",
      description: "唯一能与甲骨文记载对应的商代王室成员墓葬品"
    },
    {
      title: "造型独特",
      description: "罕见的鸮形酒尊，写实与夸张完美结合"
    },
    {
      title: "工艺精湛",
      description: "集线刻、浮雕于一身，是商代青铜艺术的顶峰"
    }
  ],
  studentTask: "观察一下，这只猫头鹰是更神气，还是更可爱？",
  introduction: "我可是三千年前的“巾帼英雄”，既能打仗，还能装美酒，厉害吧！"
};

// 妇好鸮尊页面组件
export default function FuHaoOwlZunPage() {
  return (
    <div className="max-w-3xl mx-auto bg-white p-4 md:p-6 shadow-sm">
      {/* 顶部横幅区域 */}
      <header className="bg-gradient-to-r from-teal-600 to-emerald-700 text-white rounded-t-lg p-4 mb-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl md:text-3xl font-bold mb-1">{fuHaoOwlZunData.title}</h1>
            <p className="text-teal-100">{fuHaoOwlZunData.subtitle}</p>
          </div>
          <div className="bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
            可打印版本
          </div>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main className="space-y-8">
        {/* 文物图片与基本档案区 */}
        <section className="flex flex-col md:flex-row gap-6">
          {/* 文物图片 */}
          <div className="md:w-1/3 flex flex-col items-center">
            <div className="bg-teal-50 w-full aspect-square rounded overflow-hidden flex items-center justify-center mb-2">
               <img 
  src="https://lf-code-agent.coze.cn/obj/x-ai-cn/279122722562/attachment/2_20250926161406.jpg" 
  alt="妇好鸮尊" 
                className="w-full h-full object-cover p-0"
              />
            </div>
            <p className="text-sm text-gray-600 text-center italic">
              ▲ {fuHaoOwlZunData.imageDescription}
            </p>
          </div>

          {/* 基本档案 */}
          <div className="md:w-2/3 bg-gray-50 border-l-4 border-teal-500 p-4">
            <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
              <span className="bg-teal-200 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
                ■
              </span>
              基本档案
            </h2>
            <ul className="space-y-2 text-sm text-gray-700">
              <li className="flex">
                <span className="font-medium w-20">年代：</span>
                <span>{fuHaoOwlZunData.basicInfo.age}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">材质：</span>
                <span>{fuHaoOwlZunData.basicInfo.material}</span>
              </li>
              <li className="flex"> 
                <span className="font-medium w-20">尺寸：</span>
                <span>{fuHaoOwlZunData.basicInfo.size}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">特色：</span>
                <span>{fuHaoOwlZunData.basicInfo.feature}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">展厅：</span>
                <span>{fuHaoOwlZunData.basicInfo.exhibitionHall}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">神奇之处：</span>
                <span className="font-semibold text-teal-700">{fuHaoOwlZunData.basicInfo.amazingFeature}</span>
              </li>
            </ul>
          </div>
        </section>

        {/* 它是干什么的？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-2 flex items-center">
            <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            它是干什么的？
          </h2>
          <p className="text-gray-700 pl-7">{fuHaoOwlZunData.function}</p>
        </section>

        {/* 为什么这么珍贵？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ▼
            </span>
            为什么这么珍贵？
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {fuHaoOwlZunData.values.map((value, index) => (
              <div key={index} className="bg-teal-50 p-4 rounded-lg border border-teal-100">
                <h3 className="font-bold text-teal-800 text-sm mb-1 flex items-center">
                  <span className="text-teal-500 mr-1">✔</span>
                  {value.title}
                </h3>
                <p className="text-xs text-gray-700">{value.description}</p>
              </div>
            ))}
          </div>
        </section>

        {/* 幽默自我介绍 */}
        <section className="bg-teal-50 p-4 rounded-lg border-l-4 border-teal-300 mt-4">
          <p className="text-gray-700 italic text-sm">{fuHaoOwlZunData.introduction}</p>
        </section>

        {/* 观察任务区 */}
        <section className="mt-8">
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-teal-100 text-teal-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            观察任务
          </h2>
          
          <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
            <h3 className="font-bold text-yellow-800 text-sm mb-2">给小学生的观察任务：</h3>
            <p className="text-gray-700 text-sm mb-4">{fuHaoOwlZunData.studentTask}</p>
            
            <textarea 
              className="w-full border border-dashed border-gray-300 rounded p-3 min-h-[100px] text-sm"
              placeholder="我的发现(在这里写下你的观察):"
            ></textarea>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="mt-8 text-center text-xs text-gray-500 pb-4">
        <p>石头妈妈-河南博物院 · 文物教育系列 · 适合打印学习</p>
      </footer>
    </div>
  );
}